<template>
  <div
    :class="{'hidden':hidden}"
    class="pagination-container"
    >
    <el-pagination
    :current-page.sync="currentPage"
    :layout="layout"
    :page-sizes="pageSizes"
    :total="total"
     @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'Pagination'
})

export default class extends Vue {
  @Prop({required:true}) private total!:number
  @Prop({default:1}) private page!: number
  @Prop({default:10}) private limit!:number
  @Prop({default:()=>[10,20,30,50]}) private pageSizes!: number[]
  @Prop({default:'total,sizes,prev,pager,next'}) private layout!: string
  @Prop({default:true}) private background!:boolean
  @Prop({ default: false }) private hidden!: boolean


// vueCli2中的计算属性的简写
  get currentPage() {
    return this.page
  }

  set currentPage(value) {
    this.$emit('update:page', value)
  }

  get pageSize() {
    return this.limit
  }

  set pageSize(value) {
    this.$emit('update:limit', value)
  }

  handleSizeChange(value: number) {
  
    var obj = {
      page: this.currentPage,
      limit: value
    }
    this.$emit('pagination',obj)
  }
  handleCurrentChange(value: number) {
    var obj = {
      page: this.currentPage,
      limit: this.pageSize
    }

     this.$emit('pagination',obj)

  }





}


</script>

<style lang="less" scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}

</style>